<template>
    <!-- 它的目标：显示它对应的那个频道下的文章信息
      为了达到从文章详情页回到列表时，能还原它的滚动条的位置：
      1. 在组件内监听scroll，实时记录这个位置
      2. 再次回到本组件（从文章详情页回来），去恢复滚动条的位置

      如果这个组件被缓存了，则它会多个两个特殊的钩子函数
      activated() {}    激活
      deactivated () {} 失活
    -->
  <div class="scroll-wrapper" @scroll="hScroll" ref="refScroll">
      <van-pull-refresh v-model="isLoadingNew" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
      <!-- art_id （文章编号）是经过bigint处理过的一个对象  -->
      <van-cell
      v-for="(item, idx) in list"
      :key="idx"
      :title="item.title"
      @click="$router.push('/article/'+item.art_id.toString())">
    <div slot="label">
          <!-- 图片 当前文章有几张图 就用几个宫格 -->
          <van-grid :column-num="item.cover.images.length" :border="false">
            <van-grid-item v-for="(img,idx) in item.cover.images" :key="idx">
              <van-image :src="img" lazy-load/>
            </van-grid-item>
          </van-grid>
          <!-- 文字说明 -->
          <div class="meta">
            <span>{{item.aut_name}}</span>
            <span>{{item.comm_count}}评论</span>
            <!-- 使用过滤器 (在date-time.js中封装，全局引入main.js)-->
            <span>{{item.pubdate | formatTime}}</span>
            <span>{{item.pubdate | relativeTime}}</span>

            <!-- 如果是登录用户，则显示X按钮； -->
            <!-- <span class="close" @click="hClose(item)" v-if="$store.state.tokenInfo.token"> -->
                <span class="close" @click.stop="hClose(item)" v-if="isLogin">
              <van-icon name="cross"></van-icon>
            </span>
          </div>

        </div>
  </van-cell>
</van-list>
      </van-pull-refresh>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getArticles } from '@/api/article.js'
export default {
  name: 'ArticleList',
  // 子组件接收 channel 信息 (父组件)
  props: ['channel'],
  data () {
    return {
      list: [], // 数据
      timestamp: null,
      isLoadingNew: false, // 是否是 下拉刷新中
      loading: false,
      finished: false
    }
  },
  // 映射一下
  computed: {
    // isLogin 是store文件中的方法
    ...mapGetters(['isLogin'])
  },
  created () {
    console.log(this.channel, 'created,启动了监听')
    this.$eventBus.$on('delArticle', (obj) => {
      // obj{articleId, channelId}
      const { articleId, channelId } = obj
      console.log('这里是', this.channel, '收到了事件', obj)
      // 判断是否是当前频道
      if (channelId !== this.channel.id) {
        console.log('你要删除的文章不在' + this.channel.name + '频道')
        return
      }
      // 在list中找到编号是obj.articleId的数据，并删除
      // 在数组中找到一个元素，并删除
      const idx = this.list.findIndex(article => {
        return article.art_id.toString() === articleId
      })
      if (idx !== -1) {
        // 找到元素
        this.list.splice(idx, 1)
      }
    })
  },
  methods: {
    // 当用户在文章列表中滚动时，会记下滚动条的位置
    hScroll () {
      // console.log(this.$refs.refScroll.scrollTop)
      // scrollTop并不是定义在data中 响应式的数据
      this.scrollTop = this.$refs.refScroll.scrollTop
    },
    // 用户点击关闭按钮
    hClose (article) {
      // 向父组件传递文章编号 通过 json-bigint处理，把文章编号转成了对象，使用toString()恢复
      const articleId = article.art_id.toString()
      // 通知父组件index.vue 显示弹层
      this.$emit('showMoreAction', articleId)
    },
    // 下拉刷新
    async onRefresh () {
      // 1.取回最新的文章 传入最新的时间戳
      const result = await getArticles(this.channel.id, Date.now())
      // 2.把文章追加到 list 的头部
      const arr = result.data.data.result
      this.list.unshift(...arr)
      // this.list = [...arr, ...this.list]
      // this.list = arr.concat(this.list)
      // 3.提示更新结果
      this.$toast.success('刷新成功' + arr.list + '条')
      // 4.结束loading状态
      this.isLoadingNew = false
    },
    /*
      List 组件通过loading和finished两个变量控制加载状态，
      当组件滚动到底部时，会触发load事件并将loading设置成true。
      此时可以发起异步操作并更新数据，数据更新完毕后，将loading设置成false即可。
      若数据已全部加载完毕，则直接将finished设置成true即可。
    */
    async onLoad () {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      if (!this.timestamp) {
        this.timestamp = Date.now()
      }
      // 1.发请求
      const result = await getArticles(this.channel.id, this.timestamp)
      // 保存本次请求回来的数据中携带的时间戳，以便下次请求再传入
      this.timestamp = result.data.data.pre_timestamp

      const arr = result.data.data.results
      console.log(result) // 取到10条数据
      // 2.把数据添加到list中去
      this.list.push(...arr)
      // 3.加载状态结束
      this.loading = false
      // 4.是否全部加载完成
      if (arr.length === 0) {
        this.finished = true
      }
    }
  },
  activated () {
    // console.log('激活 activated...activated...')
    if (this.scrollTop) {
      // 恢复滚动条位置
      this.$refs.refScroll.scrollTop = this.scrollTop
    }
  }
}
</script>

<style scoped lang="less">
  .meta{
    display: flex;
    span{
      margin-right: 10px;
    }
    .close{
      // 关闭按钮 置于列表右侧
      // 它的父级容器是flex的，给当前元素设置左外边距为auto，会让这个元素在父级容器的最右边
      margin-left: auto;
    }
  }
</style>
